<!--
 * @Description: 页面局部loading
 * @Date: 2021-07-26 15:01:16
 * @LastEditTime: 2021-09-11 23:05:31
 * @FilePath: \vue-h5\src\directive\Loading\Loading.vue
-->
<template>
  <div class="loading-box" v-show="visible">
    <van-loading></van-loading>
  </div>
</template>
<script>
import { Loading } from 'vant'
export default {
  components: {
    [Loading.name]: Loading
  },
  data () {
    return {
      visible: true
    }
  },
  methods: {
    // 显示loading
    showLoading () {
      this.visible = true
    },
    // 隐藏loading
    hideLoading () {
      this.visible = false
    }
  }
}
</script>
<style lang="less" scoped>
  .loading-box{
    min-height: 200px;
    text-align: center;
    padding: 50px 0;
    /deep/ .anticon{
      font-size: 34px;
    }
  }
</style>
